<template>
    <div>
        <!-- 登录 -->
        <!--  action="" 跳转地址 -->
        <form class="form" @submit.prevent='onSubmit'>
            <label>用户名：<input type="text" v-model="username"></label>
            <label>密码：<input type="password" v-model="password"></label>
            <!-- remmber -->
            <label>
                <input type="checkbox" v-model="checked">remmber password
            </label>
            <!-- 选择地域 -->
            <label>
                <select v-model="selected">
                    <option :value="item.id" v-for="(item,index) in seleclist" :key="index">{{item.label}}</option>
                </select>
            </label>
            <!-- 选择性别 -->
            <section>
                <label><input v-model="sex" type="radio" name='sex' :value="1">男</label>
                <label><input v-model="sex" type="radio" name='sex' :value="2">女</label>
            </section>
            <label>
                <button>提交</button>
            </label>
        </form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            username:'',
            password:'',
            checked:false,//是否记住密码
            seleclist:[
                {label:'中国',id:'cn'},
                {label:'外国',id:'en'},
            ],
            selected:'',//下拉选择地区
            sex:'',//1 男 2女
        }
    },
    methods:{
        onSubmit(){
            console.log(this.$data);
        }
    }
}
</script>
<style lang="scss">
.form{
    &>label{
        display: block;
    }
}
</style>